<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSI餐厅小筑 外卖网</title>
  <link href="../assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
  <link href="css/colors/blue.css" id="theme" rel="stylesheet">
  <!-- react -->
  <script src="../build/react.development.js"></script>
  <script src="../build/react-dom.development.js"></script>
  <script src="../build/babel.min.js"></script>
  <script src="../config.js"></script>
</head>

<body>
  <div class="preloader">
    <svg class="circular" viewBox="25 25 50 50">
      <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" /> </svg>
  </div>
  <section id="wrapper">
    <div class="login-register" style="background-image:url(../assets/images/background/total.jpg);">
      <div class="login-box card">
        <div class="card-body">

          <!-- 登录窗口组件 -->
          <div id="login"></div>

          <form class="form-horizontal" id="recoverform" action="user.html">
            <div class="form-group ">
              <div class="col-xs-12">
                <h3>重置密码</h3>
                <p class="text-muted">输入您的手机号，我们将向您发送一条验证码以修改密码 </p>
              </div>
            </div>
            <div class="form-group ">
              <div class="col-xs-12">
                <input class="form-control" type="text" required="" placeholder="手机号" /> </div>
            </div>
            <div class="form-group text-center m-t-20">
              <div class="col-xs-12">
                <button class="btn btn-primary btn-lg btn-block text-uppercase waves-effect waves-light">重置</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </section>
  <script src="../assets/plugins/jquery/jquery.min.js"></script>
  <script src="../assets/plugins/bootstrap/js/popper.min.js"></script>
  <script src="../assets/plugins/bootstrap/js/bootstrap.min.js"></script>
  <script src="js/jquery.slimscroll.js"></script>
  <script src="js/waves.js"></script>
  <script src="js/sidebarmenu.js"></script>
  <script src="../assets/plugins/sticky-kit-master/dist/sticky-kit.min.js"></script>
  <script src="../assets/plugins/sparkline/jquery.sparkline.min.js"></script>
  <script src="js/custom.min.js"></script>
  <script src="../assets/plugins/styleswitcher/jQuery.style.switcher.js"></script>
  <script type="text/babel">
    class Input extends React.Component {
      constructor(props) {
        super(props)
        this.state = {
          phone: '',
          password: ''
        }
        this.handleChange = this.handleChange.bind(this)
        this.loginIn = this.loginIn.bind(this)
      }
      handleChange(event) {
        this.setState({ [event.target.name]: event.target.value });
        console.log(event.target.name, event.target.value)
      }
      loginIn(event) {
        $.ajax({
          type: 'POST',
          url: global.targetUrl + 'login',
          data: {
            'userphone': this.state.phone,
            'password': this.state.password
          },
          success: function (res) {
            console.log('返回的',res)
            if (res.resultMsg.code === 1000) {
              localStorage.setItem('token',res.bean.token)
              localStorage.setItem('name',res.bean.user.name)
              localStorage.setItem('icon',res.bean.user.icon)
              localStorage.setItem('address',res.bean.user.address)
              localStorage.setItem('state',res.bean.user.state)
              localStorage.setItem('userid',res.bean.user.userid)
              if (res.bean.user.state === 1) {
                location.href = "mealtype.html"
              } else {
                location.href = "menu.html"
              }
            }
            else {
              alert(res.resultMsg.message)
            }
          }
        })
        console.log(global.targetUrl)
      }
      componentDidMount() {
        localStorage.clear()
      }
      render() {
        var phone = this.state.phone;
        var password = this.state.password;
        return (
          <div className="form-horizontal form-material" id="loginform">
            <h3 className="box-title m-b-20"> CSI餐厅小筑 外卖网 </h3>
            <div className="form-group ">
              <div className="col-xs-12">
                <input className="form-control" type="text" required="" placeholder="手机号" name="phone" value={phone} onChange={this.handleChange} /> </div>
            </div>
            <div className="form-group">
              <div className="col-xs-12">
                <input className="form-control" type="password" required="" placeholder="密码" name="password" value={password} onChange={this.handleChange} /> </div>
            </div>
            <div className="form-group row">
              <div className="col-md-12 font-14">
                <a href="javascript:void(0)" id="to-recover" className="text-dark pull-right">
                  忘记密码？</a> </div>
            </div>
            <div className="form-group text-center m-t-20">
              <div className="col-xs-12">
                <button className="btn btn-info btn-lg btn-block text-uppercase waves-effect waves-light" onClick={this.loginIn}>登录</button>
              </div>
            </div>
            <div className="row">
              <div className="col-xs-12 col-sm-12 col-md-12 m-t-10 text-center">
                <div className="social">
                </div>
              </div>
            </div>
            <div className="form-group m-b-0">
              <div className="col-sm-12 text-center">
                <div>没有账户？ <a href="register.html" className="text-info m-l-5"><b>注册</b></a></div>
              </div>
            </div>
          </div>
        )
      }
    }
    ReactDOM.render(
      <Input />,
      document.getElementById('login')
    )
  </script>
</body>

</html>